<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
      #contextMenu {
        position: absolute;
        list-style: none;
        padding: 10px 5px;
        left: -100px;
        background: #ccc;
        
      }

      #contextMenu li {
        cursor: pointer;
      }
    </style>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/grid.js"></script>
<script>
  const grid = new Grid()
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    // plugins: [grid],
    defaultNode: {
      size: [40, 40]
    },
    modes: {
      default: [ 'brush-select', 'drag-node' ]
    }
  });

  G6.registerEdge('self-line', {
    autoRotate: true,
    drawLabel(cfg, group) {
      const labelCfg = cfg.labelCfg || {}
      const labelStyle = this.getLabelStyle(cfg, labelCfg, group)

      const text = group.addShape('text', {
        attrs: {
          ...labelStyle,
          text: cfg.label,
          fontSize: 12,
          fill: '#404040',
          stroke: 'white',
            lineWidth: 5
        },
        className: 'edge-label',
      })

      return text
    }
  }, 'line')

  const data = {
    nodes: [
      {
        id: 'node1',
        label: 'node1',
        x: 500,
        y: 200,
        shape: 'rect'
      },
      {
        id: 'node2',
        label: 'node2',
        x: 300,
        y: 400,
        shape: 'rect'
      },
      {
        id: 'node3',
        label: 'node3',
        x: 200,
        y: 300,
        shape: 'rect'
      }
    ],
    edges: [
      {
        source: 'node1',
        target: 'node2',
        shape: 'self-line',
        label: '测试文本'
      },
      {
        source: 'node1',
        target: 'node3',
        shape: 'self-line',
        label: '测试文本2',
        labelCfg: {
          autoRotate: true,
          style: {
            stroke: 'white',
            lineWidth: 5
          }
        }
      }
    ]
  }

  graph.data(data)
  graph.render()

  graph.on('edge:click', evt => {
    console.log(evt)
    const { item } = evt
    graph.updateItem(item, {
      style: {
        lineWidth: 3,
        stroke: 'red'
      }
    })
  })

  // 创建ul
  const conextMenuContainer = document.createElement('ul')
  conextMenuContainer.id = 'contextMenu';

  // 创建li
  const firstLi = document.createElement('li')
  firstLi.innerText = '菜单项1'
  conextMenuContainer.appendChild(firstLi)

  const lastLi = document.createElement('li')
  lastLi.innerText = '菜单项2'
  conextMenuContainer.appendChild(lastLi)
  document.body.appendChild(conextMenuContainer);

  const menu = document.getElementById('contextMenu')
  graph.on('node:contextmenu', evt => {
    menu.style.left = evt.x + 'px'
    menu.style.top = evt.y + 'px'
  })

  graph.on('node:mouseleave', evt => {
    menu.style.left = '-100px'
  }) 
  
</script>
</body>
</html>
